<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <!--
			1: 在H5规范中标签tbody里面必须是tr标签，但是模板标签row放到了tbody里面故会出现bug 
			解决方法借助 is 属性进行标签的转换;使用is属性解决模板标签的bug问题
			2: 类似这种的还有ul>li,ol>li,select>option等等
			
			3:在子组件中定义data数据必须是下面形式，是用函数返回data数据，因为它可能会在多处被调用，
			以免数据冲突，让每一个子组件都拥有一个独立的数据存储，这样多个子组件不会出现互相影响的情况，而根组件vm只会调用一次，可以直接对象的形式；

			

		-->
    <div id="app">
        <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
    Vue.component("row", {
        data: function() {
            return {
                con: "this is a row"
            }
        },
        template: "<tr><td>{{con}}</td></tr>"
    });


    var vm = new Vue({
        el: "#app",
        data: {

        },
        methods: {

        }
    })
    </script>
</body>

</html>